<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 系列课程</title>
</head>
<body>

    <div id="app">
        <h1>{{msg}}</h1>

        <!--路由链接-->
        <router-link to="/products">商品管理</router-link>
        <!--显示路由组件-->
        <router-view></router-view>

    </div>
</body>
</html>
<template id="productsTemplate">
    <div>
        <h3>商品列表</h3>
        <a href="#/products/add">添加商品信息</a>
        <table border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>生产日期</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>超短裙</td>
                <td>24.24</td>
                <td>2021-02-03</td>
                <!--<td><a href="">删除</a>  <a href="#products/edit" >修改</a></td>-->
                <td><a href="">删除</a>  <a href="javascript:;" @click.prevent="editRow({id:1,name:'xiaochen'})">修改</a></td>
            </tr>
        </table>
        <!--router-view 用来展示子组件路由-->
        <router-view></router-view>
    </div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/axios.min.js"></script>
<script>


    //spring springmvc redis es springboot
    //创建组件配置对象
    const products = {
        template:"#productsTemplate",
        data(){
            return {};
        },
        methods:{
            editRow(user){
                console.log(user);
                //代码方式切换路由
                this.$router.push({path:'/products/edit',query:user}); //切换路路径 通过query (?)方式传递数据
            }
        }
    };

    //创建添加商品信息子组件
    const add = {
        template: "<div><form action=''>商品名称: <input type='text'><br> 商品价格: <input type='text'><br> <input type='button' value='保存商品'></form></div>"
    };

    const edit = {
        template: "<div><form action=''>商品id: <input type='text' v-model='user.id'><br>商品名称: <input type='text' v-model='user.name'><br>  <input type='button' value='确认修改'></form></div>",
        data(){
            return {
                user:{},
            };
        },
        methods:{},
        created(){
            console.log("edit: ",this.$route.query); //获取对应参数
            this.user = this.$route.query;
        }
    };

    //创建路由对象
    const router = new VueRouter({
        routes:[
            {path:'/',redirect:'/products'},//默认路由
            {
                path: '/products',
                name: 'products',
                component: products,
                children:[ //定义子路由 注意:子路由的path属性不能使用"/"开头
                    {path: "add", component: add},
                    {path: "edit", component: edit}
                ]
            },
        ]
    });

    const app = new Vue({
        el:"#app",
        data:{
            msg:" vue 中router 中嵌套路由的使用"
        },
        methods:{
        },
        computed:{},
        router,//注册路由
    });


</script>
